Skip to content

Conversation

@pythongosssss
Copy link
Member

@pythongosssss pythongosssss commented Oct 8, 2025

Summary

Enhancing and further modernizing the UI, giving users more usable area whilst keeping farmiliar positioning and feel of elements.

Changes

  • What: Significant restructure of the UI elements, changing elements from large blocks to floating elements, updating:

  • Side toolbar menu (floating style, supports small/normal mode, combines to scroll on height overflow)

  • Bottom tabs panel (floating style, tabs redesigned)

  • Action bar (support for docking/undocking menu)

    • Added login/user menu button to top right
  • Restyled breadcrumbs (still collapse when overflows)

  • Add litegraph support for fps info position (so it isn't covered by the sidebar)

  • Breaking:

  • Removed various elements and added new ones, I have tested custom sidebars, custom actions, etc but if scripts are inserting elements into "other" elements they may have been (re)moved.

  • Remove support for bottom menu

  • Remove support for 2nd-row tabs

Screenshots

ui
floating.ui.mp4

┆Issue is synchronized with this Notion page by Unito

@github-actions
Copy link

github-actions bot commented Oct 8, 2025

🎨 Storybook Build Status

Build completed successfully!

⏰ Completed at: 10/16/2025, 07:14:14 PM UTC

🔗 Links


🎉 Your Storybook is ready for review!

@github-actions
Copy link

github-actions bot commented Oct 8, 2025

🎭 Playwright Test Results

Some tests failed

⏰ Completed at: 10/16/2025, 07:30:48 PM UTC

📈 Summary

  • Total Tests: 497
  • Passed: 463 ✅
  • Failed: 1 ❌
  • Flaky: 3 ⚠️
  • Skipped: 30 ⏭️

📊 Test Reports by Browser

  • chromium: View Report • ✅ 454 / ❌ 1 / ⚠️ 3 / ⏭️ 30
  • chromium-2x: View Report • ✅ 2 / ❌ 0 / ⚠️ 0 / ⏭️ 0
  • chromium-0.5x: View Report • ✅ 1 / ❌ 0 / ⚠️ 0 / ⏭️ 0
  • mobile-chrome: View Report • ✅ 6 / ❌ 0 / ⚠️ 0 / ⏭️ 0

🎉 Click on the links above to view detailed test results for each browser configuration.

@github-actions
Copy link

github-actions bot commented Oct 8, 2025

🔧 Auto-fixes Applied

This PR has been automatically updated to fix linting and formatting issues.

⚠️ Important: Your local branch is now behind. Run git pull before making additional changes to avoid conflicts.

Changes made:

  • ESLint auto-fixes
  • Prettier formatting

@JorgeR81
Copy link

JorgeR81 commented Oct 9, 2025

This will be an option, right ?

@github-actions
Copy link

github-actions bot commented Oct 9, 2025

🔧 Auto-fixes Applied

This PR has been automatically updated to fix linting and formatting issues.

⚠️ Important: Your local branch is now behind. Run git pull before making additional changes to avoid conflicts.

Changes made:

  • ESLint auto-fixes
  • Prettier formatting

@pythongosssss
Copy link
Member Author

There is one failing test, this looks like a legit issue with bypassing nodes not correctly updating on the minimap but not related to these changes

@pythongosssss pythongosssss marked this pull request as ready for review October 16, 2025 19:35
@dosubot dosubot bot added the size:M This PR changes 30-99 lines, ignoring generated files. label Oct 16, 2025
@PabloWiedemann
Copy link

@PabloWiedemann, in the long term, there may be another solution.

As long as you have Top floating panels, and a Topbar above them, you'll have users wanting to drag and dock them to the Topbar. You probably don't want to allow this, since that functionality was just removed in the v3 UI. But, I bet this is the first thing most new users will try to do, and it will create frustration and a bad first impression, when they realise they can't do it.

So, why not integrate the functionality of the Top floating panels, in the Sidebar:

  • Add a new single button to "Run" the workflow ( below the main Comfy logo ).

    • You can have another button to "Cancel" below that.
    • Alternatively, the "Run" button could change shape and function, to become the Cancel button, while the workflow is running ( this would save space in the Sidebar ).
    • The other Queue menu controls ( change "Run mode"; Batch count ; Clear pending tasks ) can be added to the Queue / gallery tab ( in the "mini header" ).
  • Add a new Sidebar tab for breadcrumbs:

    • The subgraph levels can be shown vertically.
    • You can remove the breadcrumb's dropdown menu, because the buttons are mostly duplicated, but you can also have some in the Sidebar's "mini header".
    • You can also add a small number to the new sidebar's breadcrumbs button / icon ( like in the Queue sidebar's icon ), but here it would indicate the current subgraph level.
  • Finally, add the single button to "Log in", ( maybe next to the other buttons at the bottom of the Sidebar. )

@JorgeR81 we actually explored quite a few options, including integrating some of these menus into the left sidebar. In the end, we decided to go with the current design, but we’ll definitely keep your suggestions in mind for future iterations. This certainly won’t be the last UI update we do 🙂

Really appreciate how much thought you’re putting into this, it’s awesome to see people care so much about Comfy and its UX!

@benceruleanlu benceruleanlu self-requested a review October 16, 2025 21:25
@benceruleanlu
Copy link
Member

@codex review

@chatgpt-codex-connector
Copy link

Codex Review: Didn't find any major issues. 🎉

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting

@christian-byrne christian-byrne added area:ui General user interface and experience improvements area:topbar-menu labels Oct 17, 2025
@christian-byrne christian-byrne enabled auto-merge (squash) October 17, 2025 01:12
@christian-byrne christian-byrne merged commit 984ebef into main Oct 17, 2025
36 of 38 checks passed
@christian-byrne christian-byrne deleted the pysssss/v3-floating-ui branch October 17, 2025 01:12
@arjansingh arjansingh mentioned this pull request Oct 17, 2025
christian-byrne pushed a commit that referenced this pull request Oct 17, 2025
## Summary

Enhancing and further modernizing the UI, giving users more usable area
whilst keeping farmiliar positioning and feel of elements.

## Changes

- **What**: Significant restructure of the UI elements, changing
elements from large blocks to floating elements, updating:
- Side toolbar menu (floating style, supports small/normal mode,
combines to scroll on height overflow)
- Bottom tabs panel (floating style, tabs redesigned)
- Action bar (support for docking/undocking menu)
    - Added login/user menu button to top right
- Restyled breadcrumbs (still collapse when overflows)
- Add litegraph support for fps info position (so it isn't covered by
the sidebar)

- **Breaking**: 
- Removed various elements and added new ones, I have tested custom
sidebars, custom actions, etc but if scripts are inserting elements into
"other" elements they may have been (re)moved.
- Remove support for bottom menu
- Remove support for 2nd-row tabs

## Screenshots 
<img width="1116" height="907" alt="ui"
src="https://github.com/user-attachments/assets/b040a215-67d3-4c88-8c4d-f402a16a34f6"
/>


https://github.com/user-attachments/assets/571dbda5-01ec-47e8-b235-ee1b88c93dd0

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5980-Floating-Menus-UI-rework-2866d73d3650810aac60cc1afe979b60)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <[email protected]>
Co-authored-by: github-actions <[email protected]>
@brucew4yn3rp
Copy link
Collaborator

brucew4yn3rp commented Oct 18, 2025

I agree with @JorgeR81. The floating elements definitely add a modern feel to ComfyUI but the non-floating topbar seems to clash with the floating menus. Especially with the active workflow tab having the same exact text displayed as the floating button to manage the workflow, it seems redundant. (I know the floating text expands to show subgraphs when expanded)

image

I wonder if we could make the topbar disappear until the mouse hovers over that area - not dissimilar to the "Hide taskbar" setting on Windows. That way, we avoid the redundancy and extra screen space taken for 95% of the use and when a user needs to open a new workflow tab, the topbar will still be there.

Also, separate issue, but I think the login button belongs in the settings. For users that don't want to use the API nodes, it seems a bit obtrusive to have a large persistent "Log In" button that just stays at the top right of the screen.

@PabloWiedemann @pythongosssss - thoughts?

@JorgeR81
Copy link

JorgeR81 commented Oct 18, 2025

I wonder if we could make the topbar disappear until the mouse hovers over that area - not dissimilar to the "Hide taskbar" setting on Windows. That way, we avoid the redundancy and extra screen space taken for 95% of the use and when a user needs to open a new workflow tab, the topbar will still be there.

Yeah, this would be nice, in the near term.

But in the long term, I think the only way to please all users ( new and advanced alike ) would be to give them the ability to "build" their own GUI, ( like we do with nodes ! ).

Basically, allowing to combine floating menus, and to dock all menus in any edge.

I go in detail in here: #6104 (comment)

@lawlietdream
Copy link

The progress bar in comfyui-crystools is broken, now there are only unaligned numbers and percentages

christian-byrne added a commit that referenced this pull request Oct 23, 2025
Fixes #6130 -- node
previews are not positioned in correct location after
#5980

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6232-fix-node-hover-previews-overlapping-with-sidebar-2956d73d365081b2a470f7fb399fda99)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <[email protected]>
christian-byrne added a commit that referenced this pull request Nov 1, 2025
… tabs (#6515)

## Summary

Fixes missing cloud badges and server health alerts when workflow tabs
are in the second-row position.

## Problem

Badges were only visible when `Comfy.Workflow.WorkflowTabsPosition` was
set to `'Topbar'`, but not when set to `'Topbar (2nd-row)'` which is the
**default for screens < 1536px wide** on rh-test.

The `SecondRowWorkflowTabs.vue` component only rendered `<WorkflowTabs
/>` but was missing `<TopbarBadges />`.

## Changes

- Added `<TopbarBadges />` component to `SecondRowWorkflowTabs.vue`
- Updated container to use flex layout to match other topbar badge
implementations
- Badges now display in both 'Topbar' and 'Topbar (2nd-row)' positions

## Testing

- Cloud badges should now be visible on screens < 1536px wide (default
setting)
- Server health alerts from remote config should display properly in
second-row tabs

## Note

This is an **rh-test only** issue. The main branch removed the 'Topbar
(2nd-row)' option in the Floating Menus PR (#5980).

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6515-fix-add-cloud-badges-and-server-health-alerts-to-second-row-workflow-tabs-29e6d73d365081c4a4defaf97d2e789e)
by [Unito](https://www.unito.io)

Co-authored-by: Christian Byrne <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:topbar-menu area:ui General user interface and experience improvements size:M This PR changes 30-99 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

9 participants